<!-- components/CustomTabBar.vue -->
<template>
  <view class="custom-tab-bar">
    <view v-for="(item, index) in tabBarItems" :key="index" @click="switchTab(item.pagePath)">
      <image :src="item.iconPath" :class="{ 'selected': item.pagePath === currentPath }" class="icon"></image>
      <text :class="{ 'selected': item.pagePath === currentPath }">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabBarItems: [
        {
          pagePath: '/pages/leaderindex/leaderindex',
          iconPath: '/static/img/index.png',
          selectedIconPath: '/static/img/index-selected.png',
          text: '首页'
        },
        {
          pagePath: '/pages/leaderperson/leaderperson',
          iconPath: '/static/img/person.png',
          selectedIconPath: '/static/img/person-selected.png',
          text: '个人中心1'
        }
      ],
      currentPath: ''
    };
  },
  methods: {
    switchTab(pagePath) {
      uni.switchTab({
        url: pagePath
      });
    },
    updateTabBar() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      this.currentPath = `/${currentPage.route}`;
    }
  },
  mounted() {
    this.updateTabBar();
    uni.$on('pageSwitch', this.updateTabBar);
  },
  beforeDestroy() {
    uni.$off('pageSwitch', this.updateTabBar);
  }
};
</script>

<style scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.custom-tab-bar .icon {
  width: 48rpx;
  height: 48rpx;
}

.custom-tab-bar .selected {
  color: #07c160;
}
</style>
